import React from 'react';
import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';
import CustomApplication from "./customApplication";
import {WeaTools} from "ecCom";
import {message} from "antd";




class DragSort extends React.Component {


    constructor(props) {
        super(props);
    }



    render() {
        const SortableItem = SortableElement(({_index,value}) => {
            return (
                <CustomApplication {...value} itemCount={this.props.container.data.length}  index={_index} addCustomeApplicationExample={this.props.addCustomeApplicationExample} authority={this.props.container.authority} deleteApplicationById={this.props.deleteApplicationById} setAddVisiableAndEditItem={this.props.setAddVisiableAndEditItem} customApplicationFontColor={this.props.container.customApplicationFontColor}/>
            )
        });

        const SortableList = SortableContainer(({items}) => {
            return (
                <ul>
                    {items.map((value, index) => {
                        return   <SortableItem key={`item-${index}`} index={index} _index={index} value={value} />
                    })}
                </ul>
            );
        });

            return  <SortableList axis={'xy'} distance  items={this.props.data}  onSortEnd={this.onSortEnd}></SortableList>

    }
    onSortEnd = ({oldIndex, newIndex}) =>{
        let data =  this.props.container.data
        data = arrayMove(data, oldIndex, newIndex);
        this.props.setStateData({"data":data})
        let dataIds = new Array()
        for(let i in data){
            dataIds.push(data[i].id)
        }
        WeaTools.callApi('/api/portal/custommodule/savecmconfig', 'POST', {
            moduleid:this.props.container.id,
            data : dataIds
        }).then((result) => {

        });
    }
}

export default DragSort;
